<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />

		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.iconStyle{
				font-weight: 600;
				width: 20px;height:20px;margin-top:13px;margin-right:10px;
			}
		</style>
		<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
		<script>
			var vs = new VConsole();
	</script>
	</head>

	<body>
		<div style="z-index:999;width:100%;background:white;position:fixed;top:0;height:44px;border-bottom: 1px solid #ccc;line-height: 44px;text-align: center;">
			持有列表
			<a onclick="app.add();" class="mui-icon  mui-pull-right" style="line-height: 44px;margin-right: 10px;">+</a>
		</div>

		<div style="margin-top:44px;" class="mui-content" id="mui-content">
			<ul id="OA_task_1" class="mui-table-view">
				<li class="mui-table-view-cell" v-for="(item,idx) in list" :id="'li'+idx">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-blue" @click="setting(item,idx)">设置</a>
						<a class="mui-btn mui-btn-red" @click="del(idx)">删除</a>
					</div>
					<div class="mui-slider-handle">
						<div style="display: flex;flex-direction: row;justify-content: space-between;line-height: 25px;">
							<div style="text-align: left;display: flex;">
								<div @click="setOpen(item)" :style="item.isOpen?'color:red;':'color:gray;'" class="iconStyle mui-icon-extra mui-icon-extra-outline"></div>
								<div>
									<div @click="goDetail(item.code)">{{item.code}}</div>
									<div>{{item.name}}{{item.isUp?"↑":""}}{{item.isDown?"↓":""}}</div>
								</div>
							</div>
							<div :style="item.cost>item.price?'color:green':'color:blue;'">
								<div>{{item.cost}}</div>
									<div>{{((item.price-item.cost)/item.cost*100).toFixed(2)}}%</div>
							</div>
							<div :style="item.persent>0?'color:red':'color:green'">
								<div style="text-align: right;font-weight: 600;font-size: 18px;">
									<div>{{item.price}}</div>
									<div style="font-size: 13px;">{{item.persent}}<span style="font-size: 12px;"> %</span></div>
								</div>
							</div>
						</div>

					</div>
				</li>
			</ul>

			<div v-if="isEdit" style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
				<form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
					<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">编辑数据</div>
					<div class="mui-input-row">
						<label>代码：</label>
						<input type="text" v-model="editItem.code" placeholder="请输入股票代码">
					</div>
					<div class="mui-input-row">
						<label>上限：</label>
						<input type="text" v-model="editItem.up" class="mui-input-clear" placeholder="请输入提醒上限">
					</div>
					<div class="mui-input-row">
						<label>下限：</label>
						<input type="text" v-model="editItem.down" class="mui-input-clear" placeholder="请输入提醒下限">
					</div>
					<div class="mui-input-row">
						<label>成本价：</label>
						<input type="text" v-model="editItem.cost" class="mui-input-clear" placeholder="请输入成本价">
					</div>


					<div class="mui-button-row" style="margin-top:10px;">
						<button type="button" class="mui-btn mui-btn-primary" @click="save">保存</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="isEdit=false;closeSwipe();">取消</button>
					</div>
				</form>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/Dao.js"></script>
		<script src="js/GuVo.js"></script>
		<script>
			var app
			mui.init();
			(function($) {
				app = new Vue({
					el: "#mui-content",
					data: function() {
						return {
							isEdit: false,
							isVibrate: false,
							editItem: {
								code: "sz000333",
								up: "",
								down: "",
								cost: "",
								isAdd: false,
							},
							list: [{
								code: "sz000333",
								name: "美的集团",
								price: 12.5,
								persent: "5"
							}]
						}
					},
					mounted() {
						this.list = localStorage.getItem("list");
						this.list = this.list ? JSON.parse(this.list) : [];
						let that = this;
						setInterval(() => {
							that.getPrices();
						}, 3000);
					},
					methods: {
						vibrate() {
							if (this.isVibrate) return;
							let that = this;
							console.log("vibrating!!!!!");
							plus.device.vibrate(2000);
							setTimeout(() => {
								that.isVibrate = false;
							}, 2000)
						},
						goDetail(code){
							let path = "https://emwap.eastmoney.com/quote/stock/";
							if(code.indexOf("sz")){
								path+="0."+code.substr(2,6)+".html"
							}else{
								path+="0."+code.substr(2,6)+".html"
							}
							location.href=path;
						},
						setOpen(item) {
							item.isOpen = !item.isOpen;
							item.isDown = item.isUp = false;
							this.$forceUpdate();
							localStorage.setItem("list", JSON.stringify(this.list));
							
						},
						getPrices() {
							let ps = [];
							this.list.map(item => {
								ps.push(GuVo.getNowP(item.code))
							})
							let idx = 0;
							let total = 0;
							let vibrateFlag = false;
							Promise.all(ps).then(res => {
								res.map(item => {
									let row = this.list[idx];
									let nowData = GuVo.getNowVo(row.code, item);
									row.price = parseFloat(nowData.nowPrice);
									row.persent = parseFloat(nowData.persent);
									if (row.isOpen) {
										if (row.up && row.price > row.up) {
											vibrateFlag = true;
											row.isUp = true
										} else {
											row.isUp = false;
										};
										if (row.down && row.price < row.down) {
											vibrateFlag = true;
											row.isDown = true
										} else {
											row.isDown = false
										};
									}
									row.name = nowData.name;
									idx++;
								});
								if (vibrateFlag) {
									this.vibrate();
								}
								this.$forceUpdate();
							});

						},
						setting(item, idx) {

							this.editItem = JSON.parse(JSON.stringify(item));
							this.editItem.isAdd = false;
							this.editItem.idx = idx;
							this.isEdit = true;
						},
						add() {
							this.editItem = {
								isAdd: true
							}
							this.isEdit = true;
						},
						save() {
							this.editItem.up = this.editItem.up ? parseFloat(this.editItem.up) : null;
							this.editItem.down = this.editItem.down ? parseFloat(this.editItem.down) : null;
							this.editItem.cost = this.editItem.cost ? parseFloat(this.editItem.cost) : null;
							if (this.editItem.isAdd) {
								this.list.unshift(this.editItem);
							} else {
								this.list[this.editItem.idx] = this.editItem;
								this.closeSwipe()
							}
							localStorage.setItem("list", JSON.stringify(this.list));
							this.isEdit = false;
						},
						del(idx) {
							let that = this;
							var btnArray = ['确认', '取消'];
							mui.confirm('你确认删除该条记录？', '删除', btnArray, function(e) {
								if (e.index == 0) {
									that.list.splice(idx, 1);
									localStorage.setItem("list", JSON.stringify(that.list));

								} else {
									that.closeSwipe()
								}
							});
						},
						closeSwipe() {
							let idx = 0;
							this.list.map(item => {
								$.swipeoutClose($("#li" + idx)[0]);
								idx++;
							})
						}
					}
				});
				//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
				//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
				//				setTimeout(function() {
				//					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
				//					setTimeout(function() {
				//						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
				//					}, 1000);
				//				}, 1000);
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				// $('#OA_task_1').on('tap', '.mui-btn', function(event) {
				// 	var elem = this;
				// 	var li = elem.parentNode.parentNode;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			li.parentNode.removeChild(li);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(li);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// var btnArray = ['确认', '取消'];
				// //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
			})(mui);
		</script>
	</body>

</html>
